<%@ page import="main.java.domain.Task" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="./css/download.css">
    <link rel="stylesheet" href="./css/upload.css">
    <script src="./js/upload.js"></script>
    <style>
        .file-box {
            width: 340px;
        }

        .file-box:last-child::after {
            display: block;
            content: "";
            clear: both;
        }

        .upload-box {
            margin-top: 20px;;
        }
    </style>
    <title>详情</title>
</head>

<body>
<div class="container">
    <!-- page-header -->
    <a href="./index.jsp" type="button" class="btn btn-info" aria-label="Left Align">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        返回
    </a>

    <hr style="border: 1px solid #ddd;">

    <a href="${pageContext.request.contextPath}/downloadServlet?filename=timg.jpg">下载</a>

    <div class="page-header">
        <h2>${task.name} <small>请在${task.etime}前完成作业</small></h2>
    </div>

        <div>
        <p>${fn:length(files)}个附件</p>
        <div class="file-box">
            <c:forEach items="${files}" var="file">
                <div class="download-box" onclick="downloadHandle('${file}')">
                    <div class="file-img glyphicon glyphicon-cloud-download"></div>
                    <div class="file-name">${file.split("/")[fn:length(file.split("/"))-1]}</div>
                </div>
            </c:forEach>
        </div>
    </div>

    <form action="${pageContext.request.contextPath}/uploadServlet" method="post" enctype="multipart/form-data">
        <div class="upload-box">
            <div style="margin: 10px 0">
                <span>提交作业</span>
            </div>
            <div class="upload" id="upload1">
                <!-- 隐藏默认样式 -->
                <input name="files" type="file" multiple>
                <button class="btn btn-info" type="button">点击上传</button>
                <p><span>建议文件大小不超过100M</span></p>
                <div class="file-name"></div>
            </div>
        </div>
        <input type="submit" style="display: none" id="submit">
    </form>

    <hr style="border: 1px solid #ddd;">

    <div class="submit-item">

        <button onclick="submitHandle(this)" type="button" class="btn btn-success">提交</button>
    </div>
</div>

<script src="./js/upload.js"></script>
<script>
    upload('#upload1');

    // download
    function downloadHandle(path){
        const filenames = path.split('/');

        const a = document.createElement('a');
        a.setAttribute('download', filenames[filenames.length-1] || '文件');
        a.setAttribute('href', '${pageContext.request.contextPath}/downloadServlet?filename='+path);
        a.click();
    }

    function submitHandle(that) {
        const hasFile = document.querySelector('input[type=file]').files.length === 0;

        if(hasFile){
            alert('请至少选择一个文件');
        }else{
            document.querySelector('#submit').click()
        }
    }

</script>
</body>

</html>